<template>
    <!-- 添加用户的对话框 -->
    <el-dialog title="添加用户" :visible.sync="dialogVisible" @close="addDialogClose" width="40%">
      <!-- 内容主题区域 -->
      <el-form 
      :model="addForm" 
      :rules="addFormRules" 
      ref="addFormRef" 
      label-width="100px">
        <el-form-item label="用户名称" prop="username">
          <el-input v-model="addForm.username"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称" prop="nickname">
          <el-input v-model="addForm.nickname"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" prop="password">
          <el-input type="password" v-model="addForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="addForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所在部门" prop="dept_id">
            <el-select v-model="addForm.dept_id" placeholder="请选择所在部门">
              <el-option label="技术部门" value="1"></el-option>
              <el-option label="市场部门" value="2"></el-option>
              <el-option label="测试部门" value="3"></el-option>
              <el-option label="研发部门" value="4"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="电话号码" prop="phone">
          <el-input v-model="addForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱地址" prop="email">
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
        <el-form-item label="选择性别" prop="sex">
            <el-radio-group v-model="addForm.sex">
              <el-radio label="1">男</el-radio>
              <el-radio label="2">女</el-radio>
            </el-radio-group>
       </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input type="textarea" v-model="addForm.remark"></el-input>
      </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitSysUser">确 定</el-button>
      </span>
    </el-dialog>
</template>

<script>
export default {
  data() {
     // 验证密码
     var valipwd = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.addForm.checkPass !== '') {
            this.$refs.addFormRef.validateField('checkPass');
          }
          callback();
        }
      };
      //验证确认密码
      var valirepwd = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.addForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      }

    return {
      //默认的条件
      querParams: {
        //条件
        queryCondition:'',
        // 也可以加其他条件
        currentPage: 1,
        pageSize: 3,
      },
      sysUserList: [],
      totalSize: 0,
      // 对话框
      dialogVisible: false,
      // 添加用户表单数据
      addForm: {
          username:'',
          nickname:'',
          password:'',
          checkPass:'',
          dept_id:'',
          phone:'',
          email:'',
          sex:'2',
          remark:''
      },
      // 用户表单验证规则
      addFormRules:{
          username:[
            { required: true, message: '请输入用户名称', trigger: 'blur' },
            { min: 6, max: 15, message: '用户名长度在 6 到 15 个字符', trigger: 'blur' }
          ],
          nickname:[
            { required: true, message: '请输入用户昵称', trigger: 'blur' },
            { min: 6, max: 15, message: '用户昵称长度在 6 到 15 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true,validator: valipwd, trigger: 'blur' }
          ],
          checkPass: [
            { required: true,validator: valirepwd, trigger: 'blur' }
          ],
          dept_id:[
            { required: true, message: '请选择部门', trigger: 'change' }
          ]
      }
    };
  },
  created() {
    this.getSysUserList();
  },
  methods: {
    async getSysUserList() {
      const { data: res } = await this.$http.get("/system/sys_user/list", {
        params: this.querParams,
      });
      console.log(res);
      if (res.code != 0) {
        this.$message.error("无法获取用户数据列表");
      } else {
        this.sysUserList = res.data;
        this.totalSize = res.count;
      }
    },
    // 监听每页显示条数
    handleSizeChange(newPageSize){
        this.querParams.pageSize = newPageSize;
        this.getSysUserList();
    },
    // 监听当前页码数改变
    handleCurrentChange(newCurrentPage){
        this.querParams.currentPage = newCurrentPage;
        this.getSysUserList();
    },
    // 监听switch开关状态的改变
    async sysUserStatusChange(sysUserInfo){
      // 这种方式post默认传递json数据
      // const {data:res} = await this.$http.post("/system/sys_user/changeSysUserStatus",sysUserInfo);
      // 这种方式post传递的是key value
      const {data:res} = await this.$http({
        method:"post",
        url:"/system/sys_user/changeSysUserStatus",
        params:sysUserInfo
      });
      if(res.code == 200){
        this.$message.success(res.msg);
      }else{
        // 把switch状态恢复原状
        sysUserInfo.status = !sysUserInfo.status;
        this.$message.error("更新失败"); 
      }
    }
    ,
    // 监听添加用户关闭对话框的事件 
    addDialogClose(){
       this.$refs.addFormRef.resetFields();
    },
    // 提交添加用户
    submitSysUser(){
        this.$refs.addFormRef.validate(async valid => {
          if (valid) {
            // 发起真正的提交
            const {data:res} = await this.$http.post("/system/sys_user/addSysUser",this.addForm);
            if(res.code != 200){
              this.$message.error("添加用户失败");
            }else{
               this.$message.success("添加用户成功");
               //隐藏添加对话框
               this.dialogVisible = false;
               //重新获取用户列表
               this.getSysUserList();
            }

          } else {
            console.log('error submit!!');
            return false;
          }
        });
    }
  }
};
</script>

<style>
.box-card {
  margin-top: 15px;
}
.el-table {
  margin-top: 15px;
}
</style>

